<template>
    <div>
        <!-- 按钮 -->
        <el-button type="primary"  @click="dialogShow" icon="el-icon-plus" style="margin:10px 0px" size="small">添加</el-button>
        <!-- 对话框 
          :visible.sync：控制对话框的显示与隐藏
          Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator
        -->
        <el-dialog :title="tmForm.id?'修改品牌':'添加品牌'" :visible.sync="centerDialogVisible" width="40%">
        <!-- from表单 v-model属性，这个属性的作用是，把表单的数据收集到哪个对象的身上，将来表单验证，也需要这个属性-->
        <el-form :model="tmForm"  :rules="rules" ref="ruleForm">
            <el-form-item label="品牌名称" :label-width="formLabelWidth" prop="tmName">
                <el-input v-model="tmForm.tmName" autocomplete="off" style="width:80%"></el-input>
            </el-form-item>
            <el-form-item label="品牌LOGO" :label-width="formLabelWidth" prop="logoUrl">
                <!-- upload图片上传  这里收集数据，不能使用v-model，因为不是表单元素
                action：设置图片上传的接口地址
                :on-success :可以检测到图片上传成功，当图片上传成功，会执行一次
                -->
                <el-upload
                class="avatar-uploader"
                action="/dev-api/admin/product/fileUpload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="tmForm.logoUrl" :src="tmForm.logoUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelAdd">取 消</el-button>
            <el-button type="primary" @click="AddOrUpdateTradMark">确 定</el-button>
        </div>
        </el-dialog>


        <!-- 表格组件
            data:表格组件将来需要来展示的数据---数组类型
            border:给表格添加边框
            table-column属性
            label:显示的标题
            width:对应列的宽度
            align:标题的对齐方式

            注意1：elementUI当中的table组件，展示的数据是以一列一列进行展示数据
        -->
        <el-table border style="width:100%" :data="list"   v-loading="listLoading">
            <el-table-column type="index" label="序号" width="80px" align="center">
            </el-table-column>
            <el-table-column prop="tmName" label="品牌名称" width="width">
            </el-table-column>
            <el-table-column prop="logoUrl" label="品牌LOGO" width="width">
                <template v-slot:default="{row}">
                    <div style="width: 80px;height: 80px;">
                        <img :src="row.logoUrl" alt="" style="width:100%;">
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="prop" label="操作" width="width">
                <template v-slot:default="{row,$index}">
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="updateTradeMark(row,$index)">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteTradeMark(row)" slot="reference">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页器 
            当前第几页、总共多少数据、每页展示多少数据、连续的页码数
             @size-change="handleSizeChange" 
             @current-change="handleCurrentChange"

             current-page:代表当前第几页
             total:代表分页器一共需要展示数据条数
             page-size:代表的是每页展示多少条数据
             page-sizes:表示可以设置每一页展示多少条数据
             layout：可以实现分页器的布局
             pager-count：按钮的数量9，连续的页码数7  
        -->
        <el-pagination 
             style="margin-top: 20px;text-align: center;"
             @size-change="handleSizeChange" 
             @current-change="handleCurrentChange" 
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40, 50, 100]" 
            :page-size="limit"
            layout="prev, pager, next, jumper, ->,sizes,total" 
            :total="total"
            :pager-count=7
             >
        </el-pagination>
    </div>
</template>

<script>
export default {
      name:'tradeMark',
      data() {
        return {
            // 代表的分页器第几页
            currentPage: 1,
            // 总数据条数
            total:0,
            // 当前页数展示数据条数
            limit:10,
            // 列表展示的数据
            list:[],
            listLoading: false, // 是否显示列表加载的提示
            //Dialog对话框
            // 对话框显示与隐藏控制的属性
            centerDialogVisible: false,
            // 收集品牌信息:对象身上的属性，不能随便写，需要查看文档
            tmForm: {
                 id:'',
                 logoUrl:"",
                 tmName:""
            },
            formLabelWidth: '120px',
            //表单验证
            rules: {
                // 品牌名称的验证规则
                // require:必须要校验字段（前面五角星有关系） message 提示信息  
                // trigger：用户行为设置（事件的设置：blur/change）
                tmName: [
                    { required: true, message: '请输入品牌名称', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'change' }
                ],
                // 品牌logo的验证规则
                logoUrl: [
                    { required: true, message: '请上传本地图片' }
                ],
              },
            }
        },
      methods: {
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            //修改当前页展示数据条数
            this.limit = val
            this.getPageList()
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            //获取当前页，重新发送请求，刷新页面
            this.getPageList(val)
        },
        //获取品牌列表的数据
       async getPageList(pager = 1){
                this.currentPage = pager;
                  //解构出参数
                const {currentPage,limit} = this;
                //获取品牌列表的接口
                //当你向服务器发请求的时候，这个函数需要带参数，因此
                //请求后开启加载效果
                this.listLoading = true
                let result = await this.$API.trademark.reqTradMarkList(currentPage,limit)
                console.log(result);
                if(result.code == 200){
                    //响应成功，关闭加载
                    this.listLoading = false
                    // 分别是展示数据总条数与列表展示的数据
                    this.total = result.data.total;
                    this.list = result.data.records;
                }
            
        },
        //点击添加品牌的按钮
        dialogShow(){
            this.centerDialogVisible = true
            this.tmForm.id=''
            this.tmForm.tmName=''
            this.tmForm.logoUrl=''
        },
        //确认添加（确认添加品牌|修改品牌）
        AddOrUpdateTradMark(){
        // 当全部验证字段通过，再去书写业务逻辑
        this.$refs.ruleForm.validate(async (success)=>{
            //如果表单中的字段全部验证通过
            if(success){
                    // alert("成功添加");
                    this.centerDialogVisible = false
                    //成功的返回值
                    let result = await this.$API.trademark.reqAddOrUpdateTradMark(this.tmForm)
                    if(result.code == 200){
                    // 弹出信息：添加品牌成功、修改品牌成功
                    this.$message({
                       message:(this.tmForm.id?'修改品牌成功':"添加品牌成功"),
                       type:'success'
                    })
                    // 添加或者修改品牌成功以后，需要再次获取品牌列表进行展示
                    // 如果添加品牌：停留在第一页，修改品牌应该停留在当前页面
                     this.getPageList(this.tmForm.id?this.currentPage:1)
                }
            }else {
            console.log('error submit!!');
            return false;
          }
        })
            
        },
        //取消添加
        cancelAdd(){
            this.centerDialogVisible = false
            //取消后移除表单项的校验结果
            this.$refs.ruleForm.clearValidate()
        },
        //修改某一个品牌
        async  updateTradeMark(value){
            this.centerDialogVisible = true;
            // 解构获选中编辑数据信息
            const {id,tmName,logoUrl} =value;
            this.tmForm.id=id;
            this.tmForm.tmName=tmName;
            this.tmForm.logoUrl=logoUrl;
        },
        // 删除某一个品牌元素
         deleteTradeMark(data){
            console.log(data)
            // 弹窗
            this.$confirm(`你确定删除${data.tmName}？`, '提示信息', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                //当用户点击确定按钮的时候会触发
                let result = await this.$API.trademark.reqDeleteTradMark(data.id)  
                  if(result.code ==200){
                    this.$message({
                    type: 'success',
                    message: '删除成功!'
                   });
                //再次获取平台列表数据,this.list.length>1说明当前页的数据大于1,如果小于1删除后展示前面一页
                   this.getPageList(this.list.length>1?this.currentPage:this.currentPage -1);
                }
            }).catch(() => {
               /*  this.$message({
                    type: 'info',
                    message: '已取消删除'
                }); */
            });
        },
        // 上传图片相关回调
          handleAvatarSuccess(res, file) {
            // res：上传成功后返回的前端数据
            // file：上传成功之后服务器返回前端数据
            // 收集品牌图片数据，因为将来需要带给服务器
            this.tmForm.logoUrl = res.data
            //this.tmForm.logoUrl = URL.createObjectURL(file.raw);
          },
        // 图片上传之前
          beforeAvatarUpload(file) {
              const isJPG = file.type === 'image/jpeg';
              const isPng = file.type === 'image/png';
              const isLt2M = file.size / 1024 / 1024 < 2;
              if (!isJPG && !isPng) {
                  this.$message.error('上传头像图片只能是 JPG或PEG 格式!');
              }
              if (!isLt2M) {
                  this.$message.error('上传头像图片大小不能超过 2MB!');
              }
              return (isJPG||isPng)&&isLt2M;
          }
        
       },
    
        mounted() {
            // 获取列表数据方法
            this.getPageList()
            console.log(this.$API);
      } ,
   
}
</script>

<style>
   .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>